<template>
  <div>
    <div class="van-uploader">
      <div class="van-uploader__wrapper">
        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
            <!----></i><input type="file"
                 accept="image/*"
                 id="id"
                 @change="preview()"
                 class="van-uploader__input"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'imageCroper',
  props: {

  },
  data: function () {
    return {

    }
  },
  methods: {
    preview () {
      let files = document.getElementById('id').files[0]
      var imgDataUrl = this.getObjectURL(files)
      this.$emit('getPaht', imgDataUrl)
    },
    getObjectURL (file) {
      let url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      }
      return url
    }
  }
}
</script>

<style type="text/css" >
.van-uploader {
  position: relative;
  display: inline-block;
}
.van-uploader__wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.van-uploader__upload {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin: 0 8px 8px 0;
  background-color: #fff;
  border: 1px dashed #e5e5e5;
}
.van-uploader__upload-icon {
  color: #969799;
  font-size: 24px;
}

.van-icon {
  position: relative;
  font: 14px/1 "vant-icon";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.van-uploader__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
button,
input,
textarea {
  color: inherit;
  font: inherit;
}

input[type="file" i] {
  -webkit-appearance: initial;
  background-color: initial;
  cursor: default;
  align-items: baseline;
  color: inherit;
  text-align: start !important;
  padding: initial;
  border: initial;
}
input {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 0px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}
</style>
